import React, { Component,useContext } from 'react'
import PropTypes from 'prop-types'
const ctx = React.createContext({
  a: 1,
  b:2
})

export default class NewContext extends Component {
  state = {
    ctx:{
      a:0,
      b:111
    }
    
  }
  datas = [{
    a: 0,
    b: "abc",
    changeA: (newCtx) => {
      console.log(newCtx)
        this.setState({
            ctx: newCtx
        })
    }
}]

    state ={
      ctx:this.datas[0]
    } 
  render() {
    console.log(ctx)
    const Provider = ctx.Provider
    console.log(this.state)
    return (
      <Provider  value={
      
        this.state.ctx
      }>NewContext

        <ChildB />
        <button onClick={
          ()=>{
            this.setState({}, () => {
              this.datas.push(this.state.ctx);
              console.log(this.datas[1])
              console.log(this.datas[0] === this.datas[1])
            }
            )
            let abc = this.state.ctx
            abc.a++
            this.state.ctx.changeA(abc)
          }
        }>a+1</button>
      </Provider>
    )
  }
}


function ChildA (props){
  const contextValue = useContext(ctx);
  console.log(contextValue)
  return (
    <ChildB>
      <ctx.Consumer>
        {value => 
         <>a:{value.a}</> 
        }
      </ctx.Consumer>
      a:{contextValue.a}
    </ChildB>
  )
}

class ChildB extends Component {
  static contextType = ctx
  // constructor(props,context){
  //   super(props)
  //   console.log(context)
  // }
  shouldComponentUpdate(){
    console.log('更新了吗')
    return true
  }
  render(){
  return (
    <>
       ChildB
       a:{this.context.a},
       b:{this.context.b}
       {this.props.children}
    </>
  )
    
  }
}